<template>
  <div id="InputNav">
    <input
      type="text"
      :placeholder="placeholder"
      @focus="$emit('GetFocus')"
      @blur="$emit('EndFocus')"
      :value="InputVal"
    />
    <div :class="isPos?'InputDivPos':''">
<slot></slot>
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      is: false,
      isFocus: false,
      InputVal: "",
    };
  },
  props:['inpWidth','InputVal','isPos','placeholder']
};
</script>
<style lang="scss" scoped>
#InputNav {
  height: 47px;
  margin: 0px 15px 0px 0;
  position: relative;
  z-index: 9;
  & > input {
      width: 100%;
    height: 45px;
    border: 1px solid #999;
    font-size: 16px;
    color: #666;
    border-radius: 4px;
    padding: 0 0 0 10px;
    outline: 0;
    &:focus {
      border: 1px solid #ffa800;
      box-shadow: 0 0 4px #ffa800;
      transition: box-shadow 0.4s linear 0s;
    }
  }
  &>div{
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    background: #fff;
    background-color: red;
    
    right: -10px;
  }
}
.InputDivPos{
    position: absolute;
}
</style>